// Suspense 组件可以嵌套使用，管理不同子树的挂起状态

import { use, Suspense } from "react";
import PropTypes from "prop-types";

function fetchData(ms) {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(ms.toString());
    }, ms);
  });
}
function AsyncComponent({ data }) {
  const result = use(data);
  return <div>AsyncComponent:{result}</div>;
}
AsyncComponent.propTypes = {
  data: PropTypes.object.isRequired,
};
function AnotherAsyncComponent({ data }) {
  const result = use(data);
  return <div>AnotherAsyncComponent:{result}</div>;
}
AnotherAsyncComponent.propTypes = {
  data: PropTypes.object.isRequired,
};

// Suspense 组件可以嵌套使用，管理不同子树的挂起状态

// 先渲染 loadingA
// 再渲染 AsyncComponent 和 loadingB loadingC
// 再渲染 AnotherAsyncComponent
//

function App() {
  const data1 = fetchData(3000);
  const data2 = fetchData(6000);
  const data3 = fetchData(9000);
  return (
    <Suspense fallback={<p>loadingA...</p>}>
      <AsyncComponent data={data3}></AsyncComponent>
      <Suspense fallback={<p>loadingB...</p>}>
        <AnotherAsyncComponent data={data2}></AnotherAsyncComponent>
      </Suspense>
      <Suspense fallback={<p>loadingC...</p>}>
        <AnotherAsyncComponent data={data1}></AnotherAsyncComponent>
      </Suspense>
    </Suspense>
  );
}
export default App;
//异步调用接口获取返回的数据进行渲染
